<div class="btn-group btn-group-sm h-100" data-bs-toggle="buttons" role="group">
  <button *ngIf="label" class="btn btn-custom px-3" disabled>
    {{ label }}
  </button>

  <ng-container *ngFor="let item of items">
    <!-- Single toggle mode (checkbox, boolean) -->
    <ng-container *ngIf="items.length === 1">
      <label
        id="{{ prefix }}-{{ item.label | uppercase }}"
        class="btn btn-custom px-2 d-flex align-items-center"
        [ngClass]="{
          'btn-primary': control.value === true,
          active: control.value === true
        }"
        [ngbTooltip]="item.tooltip"
        [ngClass]="
          control.value === true
            ? item.activeClass
              ? item.activeClass
              : 'text-primary'
            : ''
        "
      >
        <input
          class="btn-check"
          type="checkbox"
          [formControl]="control"
          autocomplete="off"
          [checked]="control.value === true"
        />
        <app-svg
          *ngIf="item.icon"
          [icon]="item.icon"
          size="{{ item.iconSize ?? 16 }}"
          [ngClass]="{ 'me-2': !!item.label }"
        ></app-svg
        >{{ item.label }}
      </label>
    </ng-container>

    <!-- Multi toggle mode (radio buttons, uncheckable) -->
    <ng-container *ngIf="items.length > 1">
      <label
        id="{{ prefix }}-{{ item.value }}"
        class="btn btn-custom px-2 d-flex align-items-center"
        [ngClass]="{
          'btn-primary': item.value === control.value,
          active: item.value === control.value
        }"
        [ngbTooltip]="item.tooltip"
        [ngClass]="
          item.value === control.value
            ? item.activeClass
              ? item.activeClass
              : 'text-primary'
            : ''
        "
        (click)="itemClick(item, $event)"
      >
        <input
          class="btn-check"
          type="radio"
          [formControl]="control"
          [value]="item.value"
          autocomplete="off"
          [checked]="item.value === control.value"
        />
        <app-svg
          *ngIf="item.icon"
          [icon]="item.icon"
          size="{{ item.iconSize ?? 16 }}"
          [ngClass]="{ 'me-2': !!item.label }"
        ></app-svg
        >{{ item.label }}
      </label>
    </ng-container>
  </ng-container>
</div>
